<template>
    <div>
         <page-header @toLastPage="toLastPage">
       <template v-slot:title>
      充值
      </template>
        </page-header>
        <div class="bank-choose flex">
            <div class="left">充值方式</div>
            <div class="center">
            <div class="bank-wrapper flex">
                 <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jianshe"></use>
            </svg>
           <div class="bank"> 建设银行(1234)</div>
            </div>
            <div class="tip">单日交易限额¥50000.00</div>
            </div>
            <div class="right f-center"><van-icon name="arrow" /></div>
        </div>
        <div class="card">
            <div class="title">充值金额</div>
            <van-field v-model="number" label-width='1rem' type="number" label="¥" @focus="show=true" />
            <div class="border van-hairline--top-bottom"></div>
            <div class="cell flex van-hairline--bottom">
                <div class="left">
                     <div class="icon-wrapper">
                          <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-lingqiantong"></use>
                    </svg>
                     </div>
                </div>
                <div class="center">
                    <div class="top">可充值到零钱通</div>
                    <div class="bottom">有收益，可直接用于消费</div>
                </div>
                <div class="right f-center">
                    <van-icon name="arrow" />
                </div>
            </div>
            <van-number-keyboard
            :show="show"
            theme="custom"
            extra-key="."
            close-button-text="充值"
            @blur="show = false"
            @close='rechargeMoney'
            v-model="number"
            />
        </div>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import {Meteor} from 'meteor/meteor';
import { user } from '../../../api/collections/index';
export default {
   components:{
       pageHeader
   },
   data() {
       return {
           number:'',
           show:false,
           id:this.$route.params.id
       }
   }, 
    meteor: {
    $subscribe: {
      'userInf': []
    },
    userInf(){
        return user.findOne({_id:this.id})                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
    }
    },
   methods:{
       rechargeMoney(){
           if(this.userInf){
               Meteor.call('user.updatePay',{
                   id:this.id,
                   pay:Number(this.userInf.pay)+Number(this.number)
               },(err,res)=>{
                   if(err){
                       this.$toast(err.error)
                   }
                   else{
                       this.$toast.success('充值成功')
                       this.$router.go(-1)
                   }
               })
           }
       },
       toLastPage(){
           this.$router.go(-1)
       }
   },
   watch:{
       number(){
           if(this.number!==''){
                this.number = (this.number.match(/^\d*(\.?\d{0,2})/g)[0]) || null
           }
       }
   }
}
</script>
<style scoped>
    .bank-choose{
        margin-top: 1.5rem;
        font-size: .5rem;
        padding:1rem;
    }
    .left{
        width: 5rem;
    }
    .center{
        flex:1;
    }
    .right{
        width: 1rem;
    }
    .bank-wrapper .icon{
        font-size: .5rem;
        margin-top: .1rem;
    }
    .bank-wrapper .bank{
        font-weight: 700;
        margin-left: .3rem;
    }
    .tip{
        color: #888;
        margin-top: .2rem;
    }
    .right .van-icon{
        color: #888;
    }
    .card{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 5.5rem;
        border-radius: .5rem .5rem 0 0;
        background-color: #fff;
        padding: 1rem;
    }
    .title{
        font-size: .5rem;
    }
    .van-field{
        font-size: 1rem;
        font-weight: 700;
        color: #000;
        caret-color: #0BC063;
    }
    .border{
        height: 2rem;
    }
    .cell{
        padding: .5rem 0;
    }
    .cell .left{
        color: #FFC206;
        width: 2rem;
    }
    .icon-wrapper{
        background-color: #F8F7F8;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        text-align: center;
        line-height: 1.5rem;
    }
    .card .center{
        flex: 1;
        font-size: .6rem;
    }
     .card .center .bottom{
         font-size: .5rem;
         color: #888;
     }
    .card .right{
        width: 2rem;
        text-align: right;
        font-size: .6rem;
    }
</style>